<template>
  <div>
    <!-- for get data from parent -->
    <h1>{{ msg }}</h1>
    <!-- for sendData to parent  -->
    <button @click="sendData">sendData to parent</button>
  </div>
</template>
<script>
// child to parent :use the customize event.
export default {
  // by props to receive the data from parent node
  props: ["msg"],

  data() {
    return {
      childData: "I'm from child ",
    };
  },
  methods: {
    sendData() {
      // trigger parent event
      this.$emit("myEvent", this.childData);
    },
  },
};
</script>